import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

///渐变 APP var

class FadeAppBarWidget extends StatelessWidget {
  ///appBar淡入淡出的边界值（100是经过调试最好的效果）
  double maxOffset = 100.0;
  final RxDouble opacity = 0.0.obs;
  @override
  Widget build(BuildContext context) {
    double bottomBarHeight = MediaQuery.of(context).padding.bottom;
    bottomBarHeight += 49;

    return Scaffold(
        body: Stack(
          children: <Widget>[
            ///监听滚动
            NotificationListener(
              onNotification: (notification) {
                if (notification is ScrollUpdateNotification &&
                    notification.depth == 0) {
                  ///滑动通知
                  scrollViewDidScrolled(notification.metrics.pixels);
                }

                ///通知不再上传
                return true;
              },
              child: CustomScrollView(
                // controller: scrollController,
                slivers: <Widget>[
                  SliverFixedExtentList(
                    itemExtent: 80,
                    delegate: SliverChildBuilderDelegate(
                      (BuildContext context, int index) {
                        // 创建列表项
                        return Container(
                          alignment: Alignment.center,
                          color: Colors.lightBlue[100 * (index % 9)],
                          child: Text('list item $index'),
                        );
                      },
                      // 50个列表项
                      childCount: 50,
                    ),
                  )
                ],
              ),
            ),
            Obx(() => Opacity(
                  opacity: opacity.value,
                  child: Container(
                    width: 1.sw,
                    height: 64,
                    color: Colors.white,
                    child: Column(
                      children: [
                        Expanded(child: Container()),
                        Text(
                          '宁夏ETC',
                          style: TextStyle(
                              fontSize: 40.sp,
                              color: Colors.black,
                              height: 1,
                              leadingDistribution:
                                  TextLeadingDistribution.even),
                        ),
                        const SizedBox(
                          height: 10,
                        )
                      ],
                    ),
                  ),
                )),

            // rectLeftBtn,
            // roundLeftBtn,
          ],
        ),
        bottomNavigationBar: Container(
            color: Colors.orange,
            height: bottomBarHeight,
            child: Center(
              child: Text('bottom bar'),
            )));
  }

  void scrollViewDidScrolled(double offSet) {
    ///appbar 透明度
    double appBarOpacity = offSet / maxOffset;
    if (appBarOpacity < 0) {
      appBarOpacity = 0.0;
    } else if (appBarOpacity > 1) {
      appBarOpacity = 1.0;
    }
    opacity.value = appBarOpacity;
  }
}
